<template>
	<view class="u-p-b-40">
		<u-navbar title-color="#333" title-bold title-size="36" title="积分商城" :border-bottom="false"
			:background="{backgroundColor: '#FEF1E2'}"></u-navbar>
		<view class="top-div">
			<image class="jifen-img" src="../../static/img/home/jifen-img.png" mode=""></image>
			<view class="jf-div">
				<view class="font_12_333">
					积分余额
				</view>
				<view class="jf-num u-m-t-10">
					{{jifen}}
				</view>
				<view class="u-m-t-18 flex">
					<view class="jf-t" @click="detail(1)">
						积分明细
					</view>
					<view class="jf-t u-m-l-36" @click="detail(2)">
						积分规则
					</view>
				</view>
			</view>
		</view>
		<view class="jfhl">
			<view class="jpls-top">
				<image class="jpls-ng" src="../../static/img/home/jifen-t-b.png" mode="aspectFill"></image>
				<view class="jpls-text">
					积分好礼
				</view>
			</view>
			<view class="hl-div flex flex_sb flex_wrap">
				<view class="hl-item" v-for="(item,index) in list" :key="index">
					<image class="hl-img" :src="item.thumb" mode="aspectFill"></image>
					<view class="hl-td u-m-t-26">
						<view class="hl-title line_2">
							{{item.title}}
						</view>
						<view class="flex flex_sb u-m-t-10">
							<view class="">
								<span class="hl-num">{{item.jifen}}</span>
								<span class="hl-jf">积分</span>
							</view>
							<view class="hl-btn" @click="duihuan(item.id)">
								立即兑换
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				jifen:'',
				
				type:'',
				
				total:0,
				pageNum:1,
				pageSize:20,
			}
		},
		onShow() {
			if(this.type){
				this.getInfo()
			}
		},
		onLoad(e) {
			this.type = e.type
			this.getInfo()
			this.jflist()
		},
		onReachBottom() {
			if (this.pageNum * this.pageSize > this.total) {
				// uni.hideNavigationBarLoading();
			} else {
				this.pageNum++;
				this.jflist()
			}
		},
		methods: {
			//个人信息
			getInfo() {
				let url = ""
				if(this.type==1){
					url='/getUserInfo'
				}else{
					url='/lawyer/getLawyer'
				}
				
				this.$api({
					url: url,
					method: 'get',
					data: {
						token:uni.getStorageSync("token")
					},
				}).then(res => {
					if (res.code == 1) {
						this.jifen = res.data.jifen
					} 
				})
			},
			
			jflist(){
				this.$api({
					url: '/getProductList',
					method: 'get',
					data: {
						page:this.pageNum,
						limit:this.pageSize,
						type: this.type, //1用户积分商品 2律师积分商品
					},
				}).then(res => {
					if (res.code == 1) {
						// this.list = res.data.list
						
						this.total=res.data.count
						let data = res.data.list
						if (this.pageNum == 1) {
							this.list = data
						} else {
							this.list = [...this.list, ...data]
						}
					}
				})
			},
			detail(e){
				if(e==1){
					uni.navigateTo({
						url:"/pages/mine/jifenList?type="+this.type
					})
				}
				if(e==2){
					if(this.type==1){
						uni.navigateTo({
							url:"/pages/index/privacyAgreement/privacyAgreement?id=40&title=积分规则"
						})
					}else if(this.type==2){
						uni.navigateTo({
							url:"/pages/index/privacyAgreement/privacyAgreement?id=41&title=积分规则"
						})
					}
					
				}
			},
			duihuan(e){
				let that = this
				uni.showModal({
					title: '提示',
					content: '确认兑换吗',
					success: function(res) {
						if (res.confirm) {
							
							that.$api({
								url: '/addUserJifen',
								method: 'post',
								data: {
									type:that.type,
									id: e, 
									token:uni.getStorageSync("token")
								},
							}).then(res => {
								uni.navigateTo({
									url:"/pages/mine/jifenSuccess?type="+that.type
								})
							})
						}
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.top-div {
		width: 750rpx;
		height: 330rpx;
		
		background: linear-gradient( 180deg, #FEF1E2 0%, #FFF1E1 59%, rgba(254,241,226,0) 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		position: relative;
		.jifen-img{
			width: 272rpx;
			height: 222rpx;
			position: absolute;
			right: 52rpx;
			top: 0;
		}
		.jf-div{
			padding: 18rpx 52rpx;
		}
		.jf-num{
			font-weight: bold;
			font-size: 56rpx;
			color: #333333;
		}
		.jf-t{
			color: #FF5300;
			text-decoration-line: underline;
		}
	}
	.jfhl{
		width: 686rpx;
		margin: 0 auto;
		margin-top: -120rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		padding:0 24rpx;
		position: relative;
		z-index: 2;
		padding-top: 32rpx;
		
		.jpls-top {
			margin: 0 auto;
			position: relative;
			width: 280rpx;
			height: 35rpx;
		
			.jpls-ng {
				width: 280rpx;
				height: 35rpx;
				position: absolute;
				left: 0;
				top: 20rpx;
			}
		
			.jpls-text {
				text-align: center;
				font-weight: bold;
				font-size: 36rpx;
				color: #000000;
			}
		}
		.hl-div{
			margin-top: 54rpx;
			.hl-item{
				width: 310rpx;
				.hl-img{
					width: 310rpx;
					height: 330rpx;
				}
				.hl-td{
					height: 180rpx;
					width: 310rpx;
					.hl-title{
						font-weight: bold;
						font-size: 28rpx;
						color: #000000;
						height: 80rpx;
					}
					.hl-num{
						font-weight: bold;
						font-size: 36rpx;
						color: #FC3A30;
					}
					.hl-jf{
						font-weight: bold;
						font-size: 20rpx;
						color: #76706B;
						margin-left: 4rpx;
					}
					.hl-btn{
						width: 144rpx;
						height: 56rpx;
						background: #D1AD7B;
						border-radius: 32rpx 32rpx 32rpx 32rpx;
						font-weight: bold;
						font-size: 24rpx;
						color: #FFFFFF;
						line-height: 56rpx;
						text-align: center;
					}
				}
				
			}
		}
	}
</style>